Inovacijų atskleidimas: pasirinktinių įrankių kūrimas su TypeScript kompiliatoriaus API

Nuolat besivystančiame programinės įrangos kūrimo kraštovaizdyje efektyvumas ir tikslumas yra itin svarbūs. Didėjant projektams ir didėjant sudėtingumui, poreikis pritaikytiems sprendimams, siekiant supaprastinti darbo eigą, įgyvendinti kodavimo standartus ir automatizuoti pasikartojančias užduotis, tampa vis svarbesnis. Nors pats TypeScript yra galinga kalba, skirta patvarioms ir mastelio keičiamoms programoms kurti, tikrasis jo potencialas kurti pasirinktinius įrankius atskleidžiamas naudojant sudėtingą TypeScript Compiler API.

Šis tinklaraščio įrašas gilinsis į TypeScript kompiliatoriaus API galimybes, suteikdamas kūrėjams visame pasaulyje galimybę kurti pagal užsakymą pritaikytus įrankius, kurie gali pakeisti jų kūrimo procesus. Ištirsime, kas yra API, kodėl turėtumėte apsvarstyti galimybę jį naudoti, ir pateiksime praktinių įžvalgų bei pavyzdžių, kad galėtumėte pradėti savo pasirinktinių įrankių kūrimo kelionę.

Kas yra TypeScript kompiliatoriaus API?

Iš esmės, TypeScript kompiliatoriaus API yra programinė sąsaja, leidžianti jums bendrauti su pačiu TypeScript kompiliatoriumi. Pagalvokite apie tai kaip apie būdą pasinaudoti tuo pačiu intelektu, kurį TypeScript naudoja jūsų kodui suprasti, analizuoti ir transformuoti, bet savo pasirinktiniams tikslams.

Kompiliatorius veikia analizuodamas jūsų TypeScript kodą į Abstract Syntax Tree (AST). AST yra medžio tipo jūsų kodo struktūros atvaizdas, kur kiekvienas mazgas reiškia jūsų kode esantį konstruktą, pvz., funkcijos deklaracija, kintamojo priskyrimas ar išraiška. Kompiliatoriaus API pateikia įrankius, skirtus:

• Analizuoti TypeScript kodą: konvertuoti šaltinio failus į AST.
• Pereiti ir analizuoti AST: naršyti kodo struktūroje, kad būtų galima nustatyti konkrečius modelius, sintaksę ar semantinę informaciją.
• Transformuoti AST: modifikuoti, pridėti arba pašalinti mazgus AST, kad būtų perrašytas kodas arba generuojamas naujas kodas.
• Patikrinti kodo tipą: suprasti tipus ir ryšius tarp skirtingų jūsų kodo bazės dalių.
• Išleisti kodą: generuoti JavaScript, deklaracijų failus (.d.ts) arba kitus išvesties formatus iš AST.

Šis galingas galimybių rinkinys yra daugelio esamų TypeScript įrankių pagrindas, įskaitant patį TypeScript kompiliatorių, linterius, tokius kaip TSLint (dabar iš esmės pakeistas ESLint su TypeScript palaikymu) ir IDE funkcijas, tokias kaip kodo užbaigimas, refaktoringas ir klaidų paryškinimas.

Kodėl kurti pasirinktinius įrankius su TypeScript kompiliatoriaus API?

Kūrimo komandoms visame pasaulyje pritaikius pasirinktinius įrankius, sukurtus su Kompiliatoriaus API, galima gauti reikšmingų pranašumų:

1. Patobulinta kodo kokybė ir nuoseklumas

Skirtingi regionai ir komandos gali skirtingai interpretuoti geriausią praktiką. Pasirinktiniai įrankiai gali įgyvendinti konkrečius kodavimo standartus, modelius ir architektūros gaires, kurios yra būtinos jūsų organizacijos specifiniams poreikiams. Tai lemia lengviau prižiūrimas, skaitomesnis ir patvaresnis kodo bazes įvairiuose projektuose.

2. Padidintas kūrėjų produktyvumas

Pasikartojančios užduotys, pvz., kodo šablono generavimas, kodo bazių perkėlimas arba sudėtingų transformacijų taikymas, gali būti automatizuotos. Tai leidžia kūrėjams sutelkti dėmesį į pagrindinę logiką ir inovacijas, o ne į kasdienį, klaidų kupiną rankinį darbą.

3. Pritaikyta statinė analizė

Nors bendrieji linteriai fiksuoja daugelį dažniausiai pasitaikančių problemų, jie gali neatsižvelgti į unikalius jūsų programos sudėtingumus ar konkrečius domenui būdingus reikalavimus. Pasirinktiniai statinės analizės įrankiai gali nustatyti ir pažymėti galimas klaidas, našumo kliūtis ar saugumo pažeidžiamumus, kurie būdingi jūsų projekto architektūrai ir verslo logikai.

4. Pažangus kodo generavimas

API leidžia generuoti sudėtingas kodo struktūras, remiantis tam tikrais kriterijais. Tai neįkainojama kuriant tipo saugius API, duomenų modelius ar UI komponentus iš deklaratyvių apibrėžčių, sumažinant rankinį įgyvendinimą ir galimas klaidas.

5. Supaprastintas refaktoringas ir migracijos

Didelio masto refaktoringo pastangos arba migracijos tarp skirtingų bibliotekų ar sistemų versijų gali būti itin sudėtingos. Pasirinktiniai įrankiai gali automatizuoti daugelį šių pakeitimų, užtikrindami nuoseklumą ir sumažindami regresijos riziką.

6. Gylesnė IDE integracija

Be standartinių funkcijų, API leidžia kurti labai specializuotus IDE įskiepius, kurie siūlo kontekstą atitinkančią pagalbą, pasirinktinius greitus pataisymus ir protingus kodo pasiūlymus, pritaikytus jūsų projekto konkrečiam domenui.

Pradžia: Pagrindinės sąvokos

Norėdami pradėti kurti su TypeScript kompiliatoriaus API, turėsite tvirtai suprasti keletą pagrindinių sąvokų:

1. TypeScript programa

Programa reiškia šaltinio failų ir kompiliatoriaus parinkčių rinkinį, kuris yra kompiliuojamas kartu. Tai pagrindinis objektas, su kuriuo bendrausite, norėdami gauti semantinę informaciją apie visą savo projektą.

Programą galite sukurti taip:

            
import * as ts from 'typescript';

const fileNames: string[] = ['src/index.ts', 'src/utils.ts'];
const compilerOptions: ts.CompilerOptions = {
  target: ts.ScriptTarget.ESNext,
  module: ts.ModuleKind.CommonJS,
};

const program = ts.createProgram(fileNames, compilerOptions);

            

              
                Copy
              
            
          

2. Šaltinio failai ir tipo tikrintuvas

Iš Programos galite pasiekti atskirus SourceFile objektus, kurie reiškia kiekvieno TypeScript failo analizuotą AST. TypeChecker yra svarbus komponentas, kuris teikia semantinės analizės informaciją, pvz., tipo išvedimą, simbolių sprendimą ir tipo suderinamumo patikrą.

            
const checker = program.getTypeChecker();

program.getSourceFiles().forEach(sourceFile => {
  if (!sourceFile.isDeclarationFile) {
    // Process this source file
    ts.forEachChild(sourceFile, node => {
      // Analyze each node
    });
  }
});

            

              
                Copy
              
            
          

3. Abstraktaus sintaksės medžio (AST) traversas

Turėdami SourceFile, naršysite jo AST. Dažniausias būdas tai padaryti – naudoti ts.forEachChild(), kuris rekursyviai aplanko visus tiesioginius duoto mazgo vaikus. Sudėtingesniuose scenarijuose galite įdiegti pasirinktinius lankytojų modelius arba naudoti bibliotekas, kurios supaprastina AST traversą.

Norint nustatyti konkrečias kodo struktūras, būtina suprasti skirtingus SyntaxKinds. Pavyzdžiui:

• ts.SyntaxKind.FunctionDeclaration: reiškia funkcijos deklaraciją.
• ts.SyntaxKind.Identifier: reiškia kintamojo pavadinimą, funkcijos pavadinimą ir pan.
• ts.SyntaxKind.PropertyAccessExpression: reiškia prieigą prie ypatybės (pvz., obj.prop).

4. Semantinė analizė su tipo tikrintuvu

TypeChecker yra vieta, kur vyksta tikroji semantinio supratimo magija. Galite jį naudoti:

• Gauti simbolį, susietą su mazgu (pvz., iškviečiama funkcija).
• Nustatyti tipą išraiškos.
• Patikrinti tipo suderinamumą.
• Išspręsti nuorodas į simbolius.

            
// Example: Finding all function declarations

function findFunctionDeclarations(sourceFile: ts.SourceFile) {
  const functions: ts.FunctionDeclaration[] = [];

  function visit(node: ts.Node) {
    if (ts.isFunctionDeclaration(node)) {
      functions.push(node);
    }
    ts.forEachChild(node, visit);
  }

  visit(sourceFile);
  return functions;
}

            

              
                Copy
              
            
          

5. Kodo transformacija

Kompiliatoriaus API taip pat leidžia jums transformuoti AST. Tai daroma naudojant funkciją ts.transform(), kuri paima jūsų AST ir lankytojų rinkinį, kuris apibrėžia, kaip transformuoti mazgus. Tada galite išleisti transformuotą AST atgal į kodą.

            
import * as ts from 'typescript';

const sourceCode = 'function greet() { console.log("Hello"); }';
const sourceFile = ts.createSourceFile('temp.ts', sourceCode, ts.ScriptTarget.ESNext, true);

const visitor: ts.Visitor = (node) => {
  if (ts.isIdentifier(node) && node.text === 'console') {
    // Replace 'console' with 'customLogger'
    return ts.factory.createIdentifier('customLogger');
  }
  return ts.visitEachChild(node, visitor, ts.nullTransformationContext);
};

const transformationResult = ts.transform(sourceFile, [
  (context) => {
    const visitor = (node: ts.Node): ts.Node => {
      if (ts.isIdentifier(node) && node.text === 'console') {
        return ts.factory.createIdentifier('customLogger');
      }
      return ts.visitEachChild(node, visitor, context);
    };
    return visitor;
  }
]);

const printer = ts.createPrinter();
const transformedCode = printer.printFile(transformationResult.transformed[0]);
console.log(transformedCode);
// Output: function greet() { customLogger.log("Hello"); }

            

              
                Copy
              
            
          

Praktinis pritaikymas ir naudojimo atvejai

Ištirkime keletą realių scenarijų, kur TypeScript kompiliatoriaus API puikiai tinka:

1. Kodų pavadinimų konvencijų įgyvendinimas

Komandos gali kurti įrankius, kad įgyvendintų nuoseklias kintamųjų, funkcijų, klasių ir modulių pavadinimų konvencijas. Tai ypač naudinga didelėse, paskirstytose komandose, norint išlaikyti vieningą kodą.

Pavyzdys: įrankis, kuris pažymi bet kurį komponento pavadinimą, neatitinkantį PascalCase konvencijos, kai jis eksportuojamas iš React modulio.

            
// Imagine this is part of a linter rule

function checkComponentName(node: ts.ExportDeclaration, checker: ts.TypeChecker) {
  if (ts.isClassDeclaration(node.exportClause) || ts.isFunctionDeclaration(node.exportClause)) {
    const name = node.exportClause.name;
    if (name && !/^[A-Z]/.test(name.text)) {
      // Report error: Component name must start with an uppercase letter
      console.error(`Invalid component name: ${name.text}`);
    }
  }
}

            

              
                Copy
              
            
          

2. Automatizuotas kodo generavimas API ir duomenų modeliams

Jei turite aiškią API schemą arba duomenų struktūros apibrėžimą (pvz., OpenAPI, GraphQL schema arba net gerai apibrėžtą TypeScript sąsajų rinkinį), galite parašyti įrankius, kad generuotumėte tipo saugius klientus, serverio stubs arba duomenų patvirtinimo logiką.

Pavyzdys: TypeScript sąsajų rinkinio generavimas iš OpenAPI specifikacijos, siekiant užtikrinti nuoseklumą tarp frontend ir backend sutarčių.

Tai sudėtinga užduotis, apimanti OpenAPI spec (dažnai JSON arba YAML) analizę ir tada naudojant Kompiliatoriaus API programiškai kurti ts.InterfaceDeclaration, ts.TypeAliasDeclaration ir kitus AST mazgus.

3. Priklausomybių valdymo supaprastinimas

Įrankiai gali analizuoti importavimo sakinius, kad nustatytų nenaudojamas priklausomybes, pasiūlytų modulio kelių pseudonimus arba net padėtų automatizuoti atnaujinimus, suprasdami importo grafiką.

Pavyzdys: scenarijus, kuris nuskaito nenaudojamus importus ir siūlo juos automatiškai pašalinti.

            
// Simplified example of finding unused imports

function findUnusedImports(sourceFile: ts.SourceFile, program: ts.Program) {
  const checker = program.getTypeChecker();
  const imports: Array<{ node: ts.ImportDeclaration, isUsed: boolean }> = [];

  ts.forEachChild(sourceFile, node => {
    if (ts.isImportDeclaration(node)) {
      imports.push({ node: node, isUsed: false });
    }
  });

  ts.forEachChild(sourceFile, (node) => {
    if (ts.isIdentifier(node)) {
      const symbol = checker.getSymbolAtLocation(node);
      if (symbol) {
        // Check if this identifier is part of an imported module
        // This requires more sophisticated symbol resolution logic
      }
    }
  });

  // Logic to mark imports as used or unused based on symbol resolution
  return imports.filter(imp => !imp.isUsed).map(imp => imp.node);
}

            

              
                Copy
              
            
          

4. Pasenusių API aptikimas ir migracija

Tobulėjant bibliotekoms, jos dažnai atmeta senesnius API. Pasirinktiniai įrankiai gali sistemingai nuskaityti jūsų kodo bazę, ar naudojami šie pasenę API, ir automatiškai pakeisti juos šiuolaikiniais ekvivalentais, užtikrinant, kad jūsų projektai būtų atnaujinti.

Pavyzdys: visų pasenusios funkcijos iškvietimo pavyzdžių pakeitimas nauju, potencialiai koreguojant argumentus.

            
// Example: Replacing a deprecated function

const visitor: ts.Visitor = (node) => {
  if (
    ts.isCallExpression(node) &&
    ts.isIdentifier(node.expression) &&
    node.expression.text === 'oldDeprecatedFunction'
  ) {
    // Construct a new CallExpression for the new function
    const newCall = ts.factory.updateCallExpression(
      node,
      ts.factory.createIdentifier('newModernFunction'),
      node.typeArguments,
      [...node.arguments, ts.factory.createLiteral('migration-tag')] // Adding a new argument
    );
    return newCall;
  }
  return ts.visitEachChild(node, visitor, ts.nullTransformationContext);
};

            

              
                Copy
              
            
          

5. Saugumo auditų gerinimas

Pasirinktiniai įrankiai gali būti sukurti siekiant nustatyti įprastus saugumo anti-modelius, pvz., nesaugu tiesioginį API, kurie yra linkę į įterpimo atakas, naudojimą arba netinkamą vartotojo įvesties sanitizavimą.

Pavyzdys: įrankis, kuris pažymi tiesioginį eval() ar kitų potencialiai pavojingų funkcijų naudojimą be tinkamų sanitizavimo patikrinimų.

6. Domenui specifinės kalbos (DSL) transpiliacija

Organizacijoms, kurios kuria savo vidinius DSL, TypeScript kompiliatoriaus API gali būti naudojamas šiems DSL transpiliuoti į vykdomąjį TypeScript arba JavaScript, leidžiant jiems pasinaudoti TypeScript ekosistema.

Pirmąjį pasirinktinį įrankį

Apžvelkime žingsnius, kad sukurtume pagrindinį pasirinktinį įrankį.

1 žingsnis: nustatykite savo aplinką

Jums reikės Node.js ir npm (arba Yarn). Įdiekite TypeScript paketą:

            
npm install -g typescript
# Arba vietiniam projektui
npm install --save-dev typescript

            

              
                Copy
              
            
          

Taip pat norėsite turėti TypeScript failą, su kuriuo galėtumėte eksperimentuoti. Pavyzdžiui, sukurkite example.ts:

            
function sayHello(name: string): void {
  const message = `Hello, ${name}!`;
  console.log(message);
}

sayHello('World');

            

              
                Copy
              
            
          

2 žingsnis: parašykite savo scenarijų

Sukurkite naują TypeScript failą savo įrankiui, pvz., analyze.ts.

            
import * as ts from 'typescript';

const fileName = 'example.ts'; // The file you want to analyze
const compilerOptions: ts.CompilerOptions = {
  target: ts.ScriptTarget.ESNext,
  module: ts.ModuleKind.CommonJS,
};

// 1. Create a Program
const program = ts.createProgram([fileName], compilerOptions);

// 2. Get the SourceFile for your target file
const sourceFile = program.getSourceFile(fileName);

if (!sourceFile) {
  console.error(`Could not find source file: ${fileName}`);
  process.exit(1);
}

// 3. Traverse the AST to find specific nodes
console.log(`Analyzing file: ${sourceFile.fileName}\n`);

ts.forEachChild(sourceFile, (node) => {
  // Check for function declarations
  if (ts.isFunctionDeclaration(node) && node.name) {
    console.log(`Found function: ${node.name.text}`);

    // Check parameters
    if (node.parameters.length > 0) {
      console.log(`  Parameters: ${node.parameters.map(p => p.name.getText()).join(', ')}`);
    }

    // Check return type annotation
    if (node.type) {
      console.log(`  Return type: ${node.type.getText()}`);
    } else {
      console.warn(`  Function ${node.name.text} has no explicit return type annotation.`);
    }
  }

  // Check for console.log statements
  if (
    ts.isCallExpression(node) &&
    ts.isPropertyAccessExpression(node.expression) &&
    node.expression.name.text === 'log' &&
    ts.isIdentifier(node.expression.expression) &&
    node.expression.expression.text === 'console'
  ) {
    console.log(`  Found console.log statement.`);
  }
});

            

              
                Copy
              
            
          

3 žingsnis: sukompiliuokite ir paleiskite savo įrankį

Sukompiliuokite savo analizės scenarijų:

            
tsc analyze.ts

            

              
                Copy
              
            
          

Paleiskite sukompiliuotą JavaScript failą:

            
node analyze.js

            

              
                Copy
              
            
          

Turėtumėte pamatyti panašią išvestį:

            
Analyzing file: example.ts

Found function: sayHello
  Parameters: name
  Return type: void
  Found console.log statement.

            

              
                Copy
              
            
          

Pažangios technikos ir svarstymai

1. Lankytojai ir transformeriai

Norėdami gauti sudėtingesnes transformacijas, norėsite įdiegti tvirtus lankytojų modelius. Funkcija ts.transform(), kartu su pasirinktinėmis lankytojų funkcijomis, yra standartinis būdas perrašyti AST. Nepamirškite tvarkyti naujų mazgų kūrimo naudodami ts.factory modulį, kuris pateikia gamyklos funkcijas, skirtas AST mazgams kurti.

2. Diagnostika ir ataskaitos

Linteriams ir kodo kokybės įrankiams labai svarbu generuoti tikslius klaidų pranešimus ir diagnostiką. Kompiliatoriaus API pateikia struktūras, skirtas ts.Diagnostic objektams kurti, kurie gali būti naudojami problemoms su failų keliais, eilučių numeriais ir sunkumu pranešti.

3. Integracija su kūrimo sistemomis

Pasirinktiniai įrankiai gali būti integruoti į esamus kūrimo procesus (pvz., Webpack, Rollup, Vite) naudojant įskiepius. Tai užtikrina, kad jūsų pasirinktiniai patikrinimai ir transformacijos būtų automatiškai taikomi kūrimo proceso metu.

4. Privalumai `ts-morph` biblioteka

Tiesioginis darbas su TypeScript kompiliatoriaus API gali būti išsamus. Bibliotekos, tokios kaip ts-morph, pateikia ergonomiškesnį ir aukštesnio lygio API, skirtą TypeScript kodui manipuliuoti. Tai supaprastina įprastas užduotis, pvz., metodų įtraukimą į klases, ypatybių pasiekimą ir naujų failų kūrimą.

Pavyzdys su ts-morph (labai rekomenduojama sudėtingoms operacijoms):

            
import { Project } from 'ts-morph';

const project = new Project();
project.addSourceFileAtPath('example.ts');

const sourceFile = project.getSourceFileOrThrow('example.ts');

// Add a new parameter to the sayHello function
sourceFile.getFunctionOrThrow('sayHello').addParameter({ name: 'greeting', type: 'string' });

// Add a new console.log statement
sourceFile.addStatements('console.log(\'Migration complete!\');');

// Save the changes back to the file
project.saveSync();

console.log('File modified successfully!');

            

              
                Copy
              
            
          

5. Našumo svarstymai

Dirbant su didelėmis kodų bazėmis, jūsų pasirinktinių įrankių našumas yra svarbus. Efektyvus AST traversas, vengimas atlikti pasikartojančias operacijas ir kompiliatoriaus talpyklos mechanizmų panaudojimas yra pagrindiniai. Jūsų įrankių profiliavimas gali padėti nustatyti kliūtis.

Pasaulinio kūrimo svarstymai

Kuriant įrankius pasaulinei auditorijai, svarbūs keli veiksniai:

• Lokalizacija: Klaidų pranešimai ir ataskaitos turėtų būti lengvai lokalizuojami.
• Tarptautinimas: įsitikinkite, kad jūsų įrankiai gali tvarkyti skirtingus simbolių rinkinius ir kalbos niuansus kodo komentaruose ar eilutės litera, jei jūsų analizė juos apima.
• Laiko juostos ir vėlavimai: Jei įrankiai integruojami su CI/CD kanalais, atsižvelkite į skirtingų laiko juostų poveikį kūrimo laikui ir ataskaitoms.
• Kultūriniai niuansai: Nors mažiau tiesiogiai taikoma kodo analizei, atsižvelkite į tai, kaip pavadinimų konvencijos ar kodų stiliai gali būti paveikti regioninių nuostatų, ir sukurkite savo įrankius taip, kad jie būtų lankstūs.
• Dokumentacija: Aiškus, išsamus dokumentavimas anglų kalba yra būtinas, ir apsvarstykite galimybę pateikti vertimus, jei leidžia ištekliai.

Išvada

TypeScript kompiliatoriaus API yra galingas, nors kartais sudėtingas įrankių rinkinys, kuris suteikia didžiulį potencialą kuriant pasirinktinius sprendimus TypeScript ekosistemoje. Suprasdami pagrindines jo sąvokas – programas, šaltinio failus, AST ir tipo tikrintuvą – kūrėjai gali kurti įrankius, kurie pagerina kodo kokybę, padidina produktyvumą ir automatizuoja sudėtingas užduotis.

Nesvarbu, ar siekiate įgyvendinti unikalius kodavimo standartus, generuoti sudėtingas kodo struktūras, ar supaprastinti didelio masto refaktoringą, Kompiliatoriaus API suteikia pagrindą. Daugelis bibliotekų, tokių kaip ts-morph, gali žymiai palengvinti kūrimo procesą. Pasirinktinių įrankių kūrimo su TypeScript kompiliatoriaus API įgyvendinimas yra strateginė investicija, kuri gali duoti didelę grąžą, skatinant inovacijas ir efektyvumą jūsų pasaulinėse kūrimo komandose.

Pradėkite nuo mažų dalykų, eksperimentuokite su pagrindiniu AST traversu ir analize ir palaipsniui kurkite sudėtingesnius įrankius. TypeScript kompiliatoriaus API įsisavinimo kelionė yra naudinga, vedanti į patikimesnę, lengviau prižiūrimą ir efektyvesnę programinės įrangos kūrimo praktiką.